<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Timepicker from "./Timepicker.svelte";
    import { Row } from "../Row";
    import { Col } from "../Col";
    import { Button } from "../Button";
    import dayjs from "dayjs";

    const { Story } = defineMeta({
        title: "Components/Form/Timepicker",
        component: Timepicker,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let value = $state("");
</script>

<Story name="Default">
    {#snippet template(args)}
        <Timepicker />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Timepicker {...args} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <Row gutter={20}>
            <Col grid={0.33}>
                <Timepicker value="22:35:11" size="large" />
            </Col>
            <Col grid={0.33}>
                <Timepicker value="22:35:11" />
            </Col>
            <Col grid={0.33}>
                <Timepicker value="22:35:11" size="small" />
            </Col>
        </Row>
    {/snippet}
</Story>

<Story name="Clearable" args={{ clearable: true }}>
    {#snippet template(args)}
        <Timepicker {...args} value="22:35:11" />
        <Timepicker {...args} type="timeRange" />
    {/snippet}
</Story>

<Story name="Format" args={{ format: "HH时mm分ss秒", clearable: true }}>
    {#snippet template(args)}
        <Timepicker {...args} value="22:35:11" />
    {/snippet}
</Story>

<Story name="Steps" args={{ hourStep: 2, minuteStep: 5, secondStep: 15 }}>
    {#snippet template(args)}
        <Timepicker {...args} value="22:35:11" />
    {/snippet}
</Story>

<Story name="HeadFooter" args={{ header: "开始时间", footer: "底部" }}>
    {#snippet template(args)}
        <Timepicker {...args} value="22:35:11" />
    {/snippet}
</Story>

<Story name="DisableTime">
    {#snippet template(args)}
        <Timepicker
            disabledTime={(num: number, type: string) => {
                if ((type === "minute" || type === "second") && num % 3 === 0) {
                    return true;
                }
                return false;
            }}
        />
    {/snippet}
</Story>

<Story name="TimeRange" args={{ format: "HH时mm分ss秒" }}>
    {#snippet template(args)}
        <Timepicker {...args} type="timeRange" />
    {/snippet}
</Story>

<Story name="Trigger">
    {#snippet template(args)}
        <Timepicker {...args} bind:value>
            {#snippet trigger()}
                <Button type="primary">
                    {value ? dayjs(value).format("HH:mm:ss") : "请选择时间"}
                </Button>
            {/snippet}
        </Timepicker>
    {/snippet}
</Story>
